import React from 'react'
import styled from 'styled-components'

import github from '../../../assets/image/github.png';
import github_hover from '../../../assets/image/github_hover.png';
import twitter from '../../../assets/image/twitter.png';
import twitter_hover from '../../../assets/image/twitter_hover.png';
import discord from '../../../assets/image/tele.png';
import img_lianan from '../../../assets/image/img_lianan.png';
import medium from '../../../assets/image/medium.png';
import medium_hover from '../../../assets/image/medium_hover.png';
import ImageCommon from "../../../assets/image/common/ImageCommon";
import {colors} from "../../../common/common";
import {useTranslation} from "react-i18next";

const Nav: React.FC = () => {
    const {t} = useTranslation();
    return (
        <StyledNav>

            <StyledLink href="https://gitee.com/fishnft" target="_blank">
                <img
                    src={ImageCommon.icon_github}
                    alt={`github Logo`}
                    width={30}
                />
            </StyledLink>
            <StyledLink href="https://twitter.com/FishNFT_Ocean" target="_blank">
                <img
                    src={ImageCommon.icon_twitter}
                    alt={`twitter Logo`}
                    width={30}
                />
            </StyledLink>
            <StyledLink href="https://t.me/FishNFTOcean" target="_blank">
                <img
                    src={ImageCommon.icon_medium}
                    alt={`medium Logo`}
                    width={30}
                />
            </StyledLink>
            <StyledLink1
                href="https://asset-1301136455.cos.ap-beijing.myqcloud.com/pdf/YNC-Coin-Audit-Report-Fairyproof-CN.pdf"
                target="_blank">
                {t("audit")}
            </StyledLink1>
            {/*<StyledLink1*/}
            {/*    href="https://ht.mdex.com/#/swap?inputCurrency=0x0298c2b32eae4da002a15f36fdf7615bea3da047&outputCurrency=0x41198c6736d23734E6d17a6F0B4f2D15d2621A3a"*/}
            {/*    target="_blank">*/}
            {/*    文档*/}
            {/*</StyledLink1>*/}
            <StyledLink1 href="https://asset-1301136455.cos.ap-beijing.myqcloud.com/pdf/FishNFT.pdf" target="_blank">
                {t("whitePaper")}
            </StyledLink1>
        </StyledNav>
    )
}

const StyledNav = styled.nav`
  align-items: center;
  display: flex;
`

const StyledLink = styled.a`
  color: ${props => props.theme.color.grey[400]};
  padding-left: ${props => props.theme.spacing[5]}px;
  padding-right: ${props => props.theme.spacing[5]}px;
  text-decoration: none;
  font-size: 13px;
  &:hover {
    color: ${colors.black};
  }
  @media (max-width: 768px) {
    padding-left: ${props => props.theme.spacing[3]}px;
   padding-right: ${props => props.theme.spacing[3]}px;
   };
`
const StyledLink1 = styled.a`
  color: ${props => props.theme.color.grey[400]};
  padding-left: ${props => props.theme.spacing[5]}px;
  padding-right: ${props => props.theme.spacing[5]}px;
  text-decoration: none;
  font-size: 20px;
  &:hover {
    color: ${colors.black};
  }
  @media (max-width: 768px) {
   display:none;
   padding-left: ${props => props.theme.spacing[3]}px;
  padding-right: ${props => props.theme.spacing[3]}px;
  };
`
export default Nav
